<template>
  <div class="map-wrapper">
    <div id="map"></div>
    <div class="actions"></div>
  </div>
</template>

<script>
import axios from 'axios'
import Map from 'ol/Map'
import View from 'ol/View'
import VectorLayer from 'ol/layer/Vector'
import VectorSource from 'ol/source/Vector'
import { Fill, Stroke, Circle, Style, Text, Icon } from 'ol/style'
import { GeoJSON } from 'ol/format'
import { defaults } from 'ol/control'
export default {
  components: {},
  props: {},
  data() {
    return {
      map: null
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    this.initMap()
    this.createMap()

    // 添加流域图层
    this.addFlood()
  },
  activated() {},
  deactivated() {},
  updated() {},
  beforeDestroy() {},
  destroyed() {},
  methods: {
    initMap() {
      this.map = new Map({
        target: 'map',
        layers: [],
        view: new View({
          projection: 'EPSG:4326',
          center: [116.502429, 30.530761],
          zoom: 8.5 // 默认缩放级别
        }),
        // 设置地图控件，默认的三个控件都不显示
        controls: defaults({
          attribution: false,
          rotate: false,
          zoom: false
        })
      })
    },
    async createMap() {
      const res = await axios.get('/aq-geojson/340800_full.json')
      const data = res.data
      const layer = new VectorLayer({
        source: new VectorSource({
          features: new GeoJSON().readFeatures(data, {
            featureProjection: 'EPSG:4326'
          })
        }),
        style: function (feature) {
          const name =
            feature.get('name') ||
            feature.get('NAME') ||
            feature.get('名称') ||
            ''
          return new Style({
            fill: new Fill({
              color: 'rgba(64, 158, 255, 0.8)'
            }),
            stroke: new Stroke({
              color: '#fff',
              width: 2
            }),
            text: new Text({
              text: name,
              font: '12px sans-serif',
              fill: new Fill({
                color: '#fff'
              }),
              stroke: new Stroke({
                color: '#000',
                width: 3
              })
            })
          })
        }
      })
      this.map.addLayer(layer)
    },
    // 添加流域
    addFlood() {
      axios
        .get(
          'https://aq.zhslapp.com:20103/geoserver/aqzhsl_slgc/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=aqzhsl_slgc%3Ageo_basin_divide_aq&outputFormat=application%2Fjson&Authkey=330b5664-21fd-4680-bcbf-fabf73e077b8'
        )
        .then(res => {
          let floodJson = res.data
          let floodLayer = new VectorLayer({
            source: new VectorSource({
              features: new GeoJSON().readFeatures(floodJson)
            }),
            style: new Style({
              stroke: new Stroke({
                color: 'red'
              })
            }),
            zIndex: 4
          })
          floodLayer.set('name', 'flood')
          this.map.getLayers().push(floodLayer)
        })
    }
  },
  filters: {}
}
</script>
<style scoped lang="scss">
.map-wrapper {
  height: 100%;
  position: relative;
  #map {
    height: 100%;
    width: 100%;
    background: url(./images/map-bg.png);
    background-size: cover;
    background-repeat: no-repeat;
  }
  .actions {
    position: absolute;
    bottom: 10px;
    left: 10px;
    display: flex;
    gap: 10px;

    button {
      padding: 8px 16px;
      border: none;
      background-color: #409eff;
      color: #fff;
      border-radius: 6px;
      cursor: pointer;
      font-size: 14px;
      transition: all 0.3s ease;

      &:hover {
        background-color: #66b1ff;
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
      }
    }
  }
}
</style>
